<template>
    <a-card :bordered="false">
        <div class="topology">
            <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
            <a-row :gutter="24">
                <a-col :xl="12" :lg="7" :md="12" :sm="12">
                    <!-- 引领型企业 -->
                    <div>
                        <span class="enterprise">引领型企业：</span>
                        <div>
                            <span>提货:</span>
                            <ul>
                                <li v-for="(item, i) in leadingEnterprisesPickup" :key="i">
                                    {{ item.goods }} -
                                    优先级：{{ item.priority }}
                                    <a @click="handleEdit(item)">编辑</a>
                                    <a-divider type="vertical" />
                                    <a-popconfirm title="确认删除吗?" ok-text="是" cancel-text="否"
                                        @confirm="del(item.id)" @cancel="delCancel">
                                        <a href="#">删除</a>
                                    </a-popconfirm>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <span>送货:</span>
                            <ul>
                                <li v-for="(item, i) in leadingEnterprisesDelivery" :key="i">
                                    {{ item.goods }} -
                                    优先级：{{ item.priority }}
                                    <a @click="handleEdit(item)">编辑</a>
                                    <a-divider type="vertical" />
                                    <a-popconfirm title="确认删除吗?" ok-text="是" cancel-text="否"
                                        @confirm="del(item.id)" @cancel="delCancel">
                                        <a href="#">删除</a>
                                    </a-popconfirm>
                                </li>
                            </ul>
                        </div>
                    </div>
                </a-col>
                <a-col :xl="12" :lg="7" :md="12" :sm="12">
                    <!-- 非引领型企业 -->
                    <div>
                        <span class="enterprise">非引领型企业：</span>
                        <div>
                            <span>提货:</span>
                            <ul>
                                <li v-for="(item, i) in nonLeadingEnterprisesPickup" :key="i">
                                    {{ item.goods }} -
                                    优先级：{{ item.priority }}
                                    <a @click="handleEdit(item)">编辑</a>
                                    <a-divider type="vertical" />
                                    <a-popconfirm title="确认删除吗?" ok-text="是" cancel-text="否"
                                        @confirm="del(item.id)" @cancel="delCancel">
                                        <a href="#">删除</a>
                                    </a-popconfirm>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <span>送货:</span>
                            <ul>
                                <li v-for="(item, i) in nonLeadingEnterprisesDelivery" :key="i">
                                    {{ item.goods }} -
                                    优先级：{{ item.priority }}
                                    <a @click="handleEdit(item)">编辑</a>
                                    <a-divider type="vertical" />
                                    <a-popconfirm title="确认删除吗?" ok-text="是" cancel-text="否"
                                        @confirm="del(item.id)" @cancel="delCancel">
                                        <a href="#">删除</a>
                                    </a-popconfirm>
                                </li>
                            </ul>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </div>
        <basic-goods-modal ref="modalForm" @ok="modalFormOk"></basic-goods-modal>
    </a-card>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { deleteAction } from '../../../api/manage'
import BasicGoodsModal from './modules/BasicGoodsModal'

export default {
    name: 'Topology',
    components: {
        BasicGoodsModal
    },
    data() {
        return {
            leadingEnterprisesPickup: [], // 引领型企业提货
            leadingEnterprisesDelivery: [], // 引领型企业送货
            nonLeadingEnterprisesPickup: [], // 非引领型企业提货
            nonLeadingEnterprisesDelivery: [], // 非引领型企业送货
            url: {
                topology: "/basicGoods/basicGoods/topology",
                delete: "/basicGoods/basicGoods/delete",
            }
        };
    },
    created() {
        this.fetchData();
    },
    methods: {
        handleAdd() {
            this.$refs.modalForm.add();
            this.$refs.modalForm.title = "新增";
            this.$refs.modalForm.disableSubmit = false;
        },
        handleEdit(record) {
            this.$refs.modalForm.edit(record);
            this.$refs.modalForm.title = "编辑";
            this.$refs.modalForm.disableSubmit = false;
        },
        modalFormOk() {
            // 新增/修改 成功时，重载列表
            this.fetchData();
        },
        fetchData() {
            getAction(this.url.topology).then((res) => {
                if (res.success) {
                    console.log(res.result)
                    this.enterprises = this.processData(res.result)
                }
            })
        },
        processData(data) {
            this.leadingEnterprisesPickup = []
            this.leadingEnterprisesDelivery = []
            this.nonLeadingEnterprisesPickup = []
            this.nonLeadingEnterprisesDelivery = []
            data.forEach(row => {
                if (row.leadingEnterprise === 1) {
                    if (row.transportStatus === 0) {
                        this.leadingEnterprisesPickup.push(row);
                    } else if (row.transportStatus === 1) {
                        this.leadingEnterprisesDelivery.push(row);
                    }
                } else if (row.leadingEnterprise === 0) {
                    if (row.transportStatus === 0) {
                        this.nonLeadingEnterprisesPickup.push(row);
                    } else if (row.transportStatus === 1) {
                        this.nonLeadingEnterprisesDelivery.push(row);
                    }
                }
            });
        },
        del(id) {
            deleteAction(this.url.delete, { id: id }).then((res) => {
                if (res.success) {
                    this.$message.success(res.message);
                    this.fetchData();
                } else {
                    this.$message.warning(res.message);
                }
            });
        },
        delCancel() {
        },
    }
};
</script>

<style scoped>
.topology {
    font-family: Arial, sans-serif;
}

.enterprise {
    font-weight: bold;
}

ul {
    list-style-type: none;
    padding-left: 20px;
}

li {
    margin-bottom: 5px;
}
</style>